<template>
  <div class="flex">
    <div class="box" v-for="(item, i) in list" :key="item.id">
      <div class="videocontent">
        <LivePlayerDemo
          :autoplay="true"
          :videourl="item.data.url"
          :imgurl="item.image"
          @errorUrl="errorUrl"
        />
        <!-- <div class="play" @click="playLive"></div> -->
        <div class="rectangle flex">
          <div :title="item.name">{{item.name }}</div>
          <div :title="item.ip">{{item.ip }}</div>
        </div>
      </div>
      <div class="txt" :title="item.location">监控位置：{{ item.location }}</div>
    </div>
  </div>
</template>
<script>
import LivePlayerDemo from "components/LivePlayerDemo.vue";
export default {
  components: {
    LivePlayerDemo,
  },
  props: {
    list: {
      type: Array,
      default:function(){
        return []
      }
    },
  },
  computed: {},
  data() {
    return {};
  },
  methods: {
    errorUrl(n) {
      this.$emit("errorUrl", n);
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.box {
  width: 9.2vw;
  height: 7.19vw;
  overflow: hidden;
}
.videocontent {
  position: relative;
  height: 6.2vw;
  border: solid 0.05vw #12d8f1;
  box-sizing: border-box;
}
.txt {
  padding-top: 0.36vw;
  font-size: 0.52vw;
  letter-spacing: 0vw;
  color: #ffffff;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.rectangle {
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  width:99%;
  overflow: hidden;
  height: 1.2vw;
  line-height: 1.2vw;
  background: url(../../assets/images/zyy/vtips.png) no-repeat center;
  background-size: cover;
  opacity: 1;
  color:#fff
}
.rectangle div {
  padding: 0 0.4vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.36vw;
  font-weight: normal;
  letter-spacing: 0vw;
  color: #ffffff;
  cursor: pointer;
}
.play {
  position: absolute;
  background: url(../../assets/images/zyy/play.png) no-repeat center;
  background-size: 100%;
  width: 1.04vw;
  height: 1.2vw;
  top: 2.4vw;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</style>
